<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库问答系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .chat-container {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
            height: 400px;
            overflow-y: auto;
        }
        .message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        .user-message {
            background-color: #e3f2fd;
            margin-left: 20%;
        }
        .assistant-message {
            background-color: #f5f5f5;
            margin-right: 20%;
        }
        .input-container {
            display: flex;
            gap: 10px;
        }
        #question {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #2196f3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #1976d2;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .upload-container {
            margin-bottom: 20px;
        }
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0,0,0,.1);
            border-radius: 50%;
            border-top-color: #2196f3;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <h1>知识库问答系统</h1>
    
    <div class="upload-container">
        <h3>上传文档</h3>
        <input type="file" id="fileInput">
        <button onclick="uploadDocument()">上传</button>
    </div>

    <div class="chat-container" id="chatContainer"></div>
    
    <div class="input-container">
        <input type="text" id="question" placeholder="请输入您的问题...">
        <button id="sendButton" onclick="sendQuestion()">发送</button>
    </div>

    <script>
        function addMessage(message, isUser) {
            const container = document.getElementById('chatContainer');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user-message' : 'assistant-message'}`;
            messageDiv.textContent = message;
            container.appendChild(messageDiv);
            container.scrollTop = container.scrollHeight;
        }

        function uploadDocument() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (!file) {
                alert('请选择文件');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            fetch('/api/knowledge/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    alert('文档上传成功');
                } else {
                    alert('文档上传失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('文档上传失败');
            });
        }

        function sendQuestion() {
            const questionInput = document.getElementById('question');
            const sendButton = document.getElementById('sendButton');
            const question = questionInput.value.trim();
            
            if (!question) {
                alert('请输入问题');
                return;
            }

            // 禁用输入和按钮
            questionInput.disabled = true;
            sendButton.disabled = true;
            
            // 添加用户消息
            addMessage(question, true);
            questionInput.value = '';

            // 添加加载动画
            const loadingDiv = document.createElement('div');
            loadingDiv.className = 'message assistant-message';
            loadingDiv.innerHTML = '<div class="loading"></div>思考中...';
            document.getElementById('chatContainer').appendChild(loadingDiv);

            const formData = new FormData();
            formData.append('question', question);
            // 发送POST请求
            fetch('/api/knowledge/chat', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.body.getReader();
            })
            .then(reader => {
                const decoder = new TextDecoder();
                let responseText = '';

                function readStream() {
                    reader.read().then(({done, value}) => {
                        if (done) {
                            // 移除加载动画
                            loadingDiv.remove();
                            // 启用输入和按钮
                            questionInput.disabled = false;
                            sendButton.disabled = false;
                            return;
                        }

                        const chunk = decoder.decode(value, {stream: true});
                        responseText += chunk;
                        
                        // 更新消息内容
                        loadingDiv.textContent = responseText;
                        document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight;

                        readStream();
                    });
                }

                readStream();
            })
            .catch(error => {
                console.error('Error:', error);
                loadingDiv.textContent = '发生错误：' + error.message;
                // 启用输入和按钮
                questionInput.disabled = false;
                sendButton.disabled = false;
            });
        }

        document.getElementById('question').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendQuestion();
            }
        });
    </script>
</body>
</html> 